



HTML5&CSS3

















jQuery














PDF























Web





Web


WebWeb 2.0


Web



Web

Web
HTMLCSS

WebHTML5HTML

XHTML




CSS3CSS


HTML5


HTML
    
 
 


CSS3
CSS





Client Side
Java Script
          

jQueryjQuery

jQueryJava Script


























HTML 5



HTML5

HTML5
HTMLXHTML

HTML
HTML
HTMLabbreviationHyper Text Markup
Language


Markup Language
HTML
Tags

Tags
Keywords

< ><b><html>
<b></b>
<b>Begin Tag
Opening Tag</b> End Tag 
Closing Tag
HTMLnotepad

DreamWaverVisual Studio
extension
.html.htm



HTML
HTMLHTMLWeb Pages
Web
BrowserInternet ExplorerFirefoxGoogle chrome
HTML
HTML

HTML
HTML
HTMLNotepad
Internet Explorer






HTML
HTML


Notepad

<html>
<head>
<title>
My first HTML page

</title>
</head>
<body>
<p>
Welcome to my first HTML page!
</p>
</body>
</html>

firstPage.html
HTML
.txt
*.*Save as type







      firstPage.html   
Internet Explorer 8


HTML
HTML
Welcome to my first HTML page!
p


HTML

HTML
 HTML Elements 
Tags




<p>
Paragraphs
HTML

< ><html><head>
<title><body><p>

HTMLBegin TagEnd Tag
< >


/Slash</ >
</html></head></title></body></p>
HTML

p
HTML




<html>
<body>
<p>

</p>
</body>
</html>

</p><p>

</body><body>

</html><html>


<html>
<body>

<p>

</body>
</html>
</p>
</body><body>
</html></p>



White Spaces
HTMLSpaceTab


HTML
<html>
<body>
<h1>
Hi!
</h1>
</body>
</html>
HTML
<html><body><h1>Hi!</h1></body></html>






Tab
Space
HTML
HTMLHTML
HTMLBegin Tag
HTMLEnd Tag
HTML



HTML
Attributes


HTML
Lower Case




</p>
Welcome to my website.
<p>
</a>
Go to index
<a href="index.htm">
<hr />

    
HTML
 

<p></p>Welcome to

my website<a href="index.htm"></a>
Go to indexindex.htmhref


<hr />
HTML
HTML
Body Section
<body></body>



HTML
Head Section
<head></head>
  HTML       


          





<html></html>

HTML
HTML
<html>
<head>

</head>
<body>


</body>
</html>
Attributes



HTML
HTML

            
Links
HTML



Attributes


<p align="center">

</p>
p
alignpcenter

<p>align

HTML
Attributes


align
<p>
leftrightcenter

name="value
name
value


‘ ‘
HTML
Lower Case


HTML

Headings

HTML




id
   


 Java ScriptjQuery
      

dir
ltr
rtl
ltr
rtl

align
left
right
center
justify

class
CSS
       
CSS3
name


HTML

Headings
HTML
h1h2h3h4
h5h6
h1
h6

hHeading

<html>
<head>
<title>

</title>
</head>
<body dir='rtl'>
<h1>
</h1>
<h2></h2>
<h3></h3>
<h4>  </h4>
<h5></h5>
<h6></h6>
</body>
</html>


 : h1h6
<body>dir
rtlright to left

              
ltr
<h1><h6>

Horizontal Line

HTML<hr />

<html>
<head>

<title>

</title>
</head>
<body dir='rtl'>
<p></p>
<hr />
<p></p>
<hr />
<p></p>
</body>
</html>

 : <hr />

Comments








Comments
HTML





<!-- comment -->
HTML
<html>
<head>
<title>


 </title>
</head>
<body dir='rtl'>
<!--  -->
<p></p> <hr />
<!-- -->
<p></p> <hr />
<!-- -->
<p></p>
</body>
</html>




<View->source





Paragraphs

<p><br />
Enter
HTML

Text Formatting
HTML
Bold
<b><strong>
Italic<i>

<em><u>Delete
<del>
<html>
<head>
<title></title>
</head>
<body>
<p>
This is a sample text to demonstrate
<b>bold</b>,
<i>italic</i>,
<u>underline</u> and
<del>delete</del> tags.
<!--

 <br/> -->
<br/>
You may use other tags to generate the same output:
<br/>
This is a sample text to demonstrate
<strong>bold</strong>,
<em>italic</em>,
<u>underline</u> and
<del>delete</del> tags.
</p>
</body>

</html>


HTML


Special Characters

HTML
&value;value
        


http://www.w3schools.com/tags/ref_symbols.asp

XHTML
&lt;
&gt;
&ne;
&trade;
&copy;
&nbsp;
 : HTML

<html>
<head>
<title>

</title>
</head>
<body>
<p>
3 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 ....
all rights reserved for &copy; Mukhtar &trade;
</p>
</body>
</html>



Hyper Links
HTMLHyper Links


<a>aAnchor



hrefHyper Reference

<html>
<head>
<title>

</title>
</head>

<body>
<a href="http://www.microsoft.com">  </a><br />
<a href="http://www.google.com"></a><br />
<a href="http://www.msn.com" target="_blank" >MSN</a>
<br />
<a href="firstPage.html" target="_self"></a>
</body>
</html>

 : 




AbsoluteRelative

Path
firstPage.html

URLhref


target



_self
_blank





Resource
E-Mail
mailto:

<html>
<head>
<title>

</title>
Paths
http://msdn.microsoft.com/en-us/library/aa365247(VS.85).aspx

</head>
<body>
<a href="http://www.somesite.com/files/file1.zip">
</a>
<br />
<a href ="mailto:mokhtar_ss@hotmail.com"></a>
</body>
</html>


Save File Dialog
Outlook
Express
Images
 HTML       


<img/>
Image

src
Source
<br/>
<img/>

<img src="path" />
<html>
<head>
<title>

</title>
</head>

<body>
<img src="myPic.jpg" />
<img src="myPic2.gif" alt="" />
<img src="myPic.jpg" alt="" width="100px"
height="50px" />
<img src="" alt="" />
</body>
</html>

 : 

<img/>alt

src

imgheightwidth

px










<a>


<img/><a>



<html>
<head>
<title>

</title>
</head>
<body>
<a href = "mailto:mokhtar_ss@hotmail.com">
<img src="myPic.jpg" alt="" />
</a>
</body>
</html>


 : 


Image Maps




<img/>
<map>name

<area>

usemap
<html>
<body>
<p></p>
<img src="planets.gif" width="145" height="126"
alt="" usemap="#planetmap" />
<map name="planetmap">

<area shape="rect" coords="0,0,82,126" alt=""
href="sun.htm" />
<area shape="circle" coords="90,58,3" alt=""
href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt=""
href="venus.htm" />
</map>
</body>
</html>







<map name="planetmap">

area
shape
     
coords           






   82,126






usemap
usemap
#

Internal Linking






HTML

Internal Links


<a>

href
<a href="#id">id  </a>
id


<html>
<head>
<title>

</title>
</head>
<body>
<a href="#Para4"></a>
<h1></h1>
<p></p>
<h1></h1>
<p></p>
<h1></h1>
<p></p>
<h1 id="Para4"></h1>
<p></p>
</body>
</html>

Lists
HTML
Unordered List<ul>
Ordered List<ol>
<li>
List Item

<html>
<head>
<title></title>
</head>
<body dir="rtl">
<p></p>
<ul>
<li>HTML</li>
<li>HTML5</li>
<li>XHTML</li>
<li>CSS</li>
<li>CSS3</li>
</ul>
</body>
</html>


 : 
<ul></ul><ol></ol>



HTML



<html>
<head>
<title></title>
</head>
<body dir="rtl">
<p></p>
<ol>
<li>
HTML
<ul>
<li></li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</li>
<li>HTML 5</li>

<li>XHTML</li>
<li>CSS</li>
<li>CSS 3</li>
</ol>
</body>
</html>

 : 

type
squaredisccircle


AaIitype


<dl>
<dt><dd>

<html>
<head>
<title></title>
</head>
<body dir="rtl">
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
<dt>XHTML</dt>
<dd>eXtensible Hyper Text Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet</dd>
</dl>
</body>
</html>



Tables
HTML<table>
<table>
widthborder

table rows
<tr>
table data
<td>





<html>
<head>
<title></title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>

</tr>
</table>
</body>
</html>

 : 

<table>width


border
<tr></tr>
<td></td>






HTML


HTML
Table Head
<thead>
</thead><tr></tr>
       <th> 
<td> 
<td>table data<th>
table heading
Table Body
<tbody>
</tbody><tr>
<td>
  Table Foot     
 <tfoot>
</tfoot><tr></tr>
<th>
 Caption       

<caption></caption>

 : HTML

HTML
<html>
<head>
<title></title>
</head>
<body dir="rtl">
<table border="1" width="50%">
<caption></caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>150</td>
</tr>
<tr>
<td></td>

<td>200</td>
</tr>
<tr>
<td></td>
<td>350</td>
</tr>
<tr>
<td></td>
<td>50</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>750</th>
</tr>
</tfoot>
</table>
</body>
</html>


HTML


bold








HTML
rowspan
colspan
rowspancolspan<td><th>

rowspancolspan


<html>
<head>
<title></title>
</head>
<body dir="rtl">
<table border="1" width="100%">
<tbody>
<tr>
<td></td>
<td> jQuery  </td>
<td rowspan="3">
<img src="jQuery120.png">
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>2010</td>
</tr>
<tr>
<td colspan="3">
 jQuery

 .
</td>
</tr>
</tbody>
</table>
</body>
</html>

rowspancolspan




rowspan="3

   
         

colspan="3rowspancolspan


rowspancolspan



HTML
Forms
FormsHTMLInputs
<form>
</form>       <input> 
text boxescheck boxesbuttons
select lists 
<form>action

     
 Server Side PHP
ASP.NETJSP

method


get



http://www.site.com/file.php?name=Mukhtar&age=23&job=ComputerEngin
eer
http://www.site.com/file.php


name = Mukhtarage = 23job = ComputerEngineer
post
HTTP

method
<form>
<input>



nameid
type








    





typeinput


<html>
<head>
<title>

</title>
</head>
<body dir="rtl">
<form method="get" action="file.php">

<input type="text" name="nameText" id="nameText" />
<br/>

<input type="password" name="pass" id="pass" />
<br/>
<input type="submit" name="okButton" id="okButton"
value="" />
</form>
</body>
</html>






<html>
<head>
<title>
</title>
</head>
<body dir="rtl">
<form method="get" action="file.php">
 <input type="text" name="nameText"
id="nameText" />
<br/>
 <input type="password" name="pass"
id="pass" />
<br/>

 <input type="file" name="pic"
id="pic">
<br/>
<input type="reset" name="resBtn" id="resBtn"
value="" />
<input type="submit" name="okButton" id="okButton"
value="" />
</form>
</body>
</html>



radiocheckbox


radio
checkbox


name
value
<html>
<head>
<title> radio  checkbox</title>
</head>
<body dir="rtl">
<form method="post" action="file.php">
<p></p>

<input type="checkbox" name="wrKnow" value="nPaper" />

<input type="checkbox" name="wrKnow" value="wbSite" />

<input type="checkbox" name="wrKnow" value="frnd" />

<input type="checkbox" name="wrKnow" value="srEng" />
<p></p>

<input type="radio" name="rate" value="good" />

<input type="radio" name="rate" value="mid" />

<input type="radio" name="rate" value="bad" />

</form>
</body>
</html>

checkboxradio
radio

<select>
<option>
selected="selected"

<html>
<head>
<title>select</title>
</head>
<body dir="rtl">

<form method="post" action="file.php">
<p></p>
<select name="nationality">
<option selected="selected"></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</form>
</body>
</html>

select

<textarea>
<input>text

<textarea>colsrows

<html>
<head>
<title>
textarea
</title>
</head>
<body dir="rtl">
<form method="post" action="file.php">
<p></p>
<textarea cols="30" rows="10" name="bio">
</textarea>
</form>
</body>
</html>


textarea


     HTML  <fieldset></fieldset>

<legend>


<label>for
<label>
<html>
<head>
<title>
fieldset 
</title>
</head>

<body dir="rtl">
<form method="get" action="">
<fieldset>
<legend></legend>
<label for="nameTXT"></label>
<input type="text" name="nameTXT" id="nameTXT"
maxlength="50" />
<br/><br/>
<label for="ageTXT"></label>
<input type="text" name="ageTXT" id="ageTXT"
maxlength="2" />
</fieldset>
<br/>
<fieldset>
<legend></legend>
C#
<input type="checkbox" name="prog" value="cs"/>
VB.NET
<input type="checkbox" name="prog" value="vb"/>
F#
<input type="checkbox" name="prog" value="fs"/>
C++.NET
<input type="checkbox" name="prog" value="cpp"/>

</fieldset>
<fieldset>
<input type="submit" value="" />
</fieldset>
</form>
</body>
</html>

fieldSet
Frames
 HTML
Frames


<frameset>



<frameset>
<frame>src



<html>
<frameset cols="30%,*">
<frame src="page_1.htm" />
<frame src="page_2.htm" />
</frameset>
</html>



<body>


noresize="noresize"<frame>
cols
<frameset>cols
rows


target
<a>
Links
<frameset><frame>
HTML<iframe>

<iframe>

<iframe src="URL"></iframe>
URL
heightwidth




Meta


<head></head>
meta



metametanamecontent
meta
meta
keywordsdescription
<html>
<head>
<meta name="keywords" content="xhtml website test
meta head"/>
<meta name="description" content="this page
demonstrates how to use meta elements"/>

</head>
<body>
</body>
</html>
MetaKeywords

MetaDescription


Meta


MetaHTML
HTML

HTML5HTML

XHTML


HTML




HTML


<!-- -->

<!DOCTYPE>
XHTML
<a>

<abbr>

<acronym>

<address>

<applet>
Applet
<area />

<b>

<base />

<basefont />
//
<bdo>

<big>

<blockqoute>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>


<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>
//
<form>

<frame />

<frameset>

<h1><h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex>

<kbd>

<label>


<legeng>
<fieldset>
<li>

<link />

<map>

<menu>

<meta />


<noframes>

<noscript>

<object>

<ol>

<optgroup>


<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>
Java ScriptjQuery

<select>

<small>

<span>

<strike>

<strong>

<style>


<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>
teletype
<u>

<ul>

<var>

<xmp>

HTML

XHTML
XHTMLeXtensible HTMLHTML

HTML
HTML


HTML
  XMLeXtensible Markup Language

XHTML







XHTML



<hTml>
<heaD>
<title>  HTML </title>
<BODY>
<h1>Bad HTML
<p>This is a paragraph
</boDy>


HTML
XHTML

XHTML
XHTML

HTML

 XHTML  XHTML


Lower Case







<html><body><head>
DOCTYPE
<!DOCTYPE>
XHTML
 <!DOCTYPE>      Document Type
DefinitionDTD


xmlns
<html>Name Space
XHTML

xmlns
XHTML



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body></body>
</html>
<!DOCTYPE>
Transitional

<!DOCTYPE>



XHTML 
XHTML 1.0 Strict
    HTML<applet><basefont>
<center><dir><font><iframe><isindex><menu>
<noframes><s><strike><u>
<frameset>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Tansitional
    HTML    

<frameset>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
XHTML 1.0 Frameset
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
Strict

Ruby


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML
XHTML 

XHTML 
http://www.w3schools.com/xhtml/default.asp
XHTML



HTML5
HTML
HTML 4.01
Web 2.0

HTML
HTML 5
HTML 5




HTML 5
HTML 5


HTML 5
 
        
Google ChromeFirefoxOperaInternet ExplorerSafari

HTML 5


Video
HTML 5
<video>heightwidth

<source>
srctype
<html>
<head>
 <title>

</title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />

</video>
</body>
</html>
         <video>
HTML 5


 :
<video> 
MPEG4OggWebM
<video>



audio
muted

autoplay
autoplay

controls
controls

height


loop
loop

poster



src


width


<video>

Audio
HTML 5
<audio>
<html>
<head>
<title></title>
</head>
<body>
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />

</audio>
</body>
</html>

 : 



<audio>
<audio>MP3Ogg
Wav
<audio>



autoplay
autoplay

controls
controls

loop
loop

preload
preload



src


<video>
Forms
HTML 5Forms
<input>
<input>
type

email

url

number


range




date

month

week

time

datetime
 

datetime-local

search
text
color

 : HTML 5

<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
Name:
<input type="text" name="stdnt_name" /><br />
E-Mail:
<input type="email" name="stdnt_email" /><br />
Website:
<input type="url" name="stdnt_url" /><br />
Points:

<input type="range" name="points" min="1"
max="10" /><br />
Date:
<input type="date" name="user_date" /><br />
<input type="submit" />
</form>
</body>
</html>


    HTML5     
<datalist> 


<option>
<select><datalist>
list

<!DOCTYPE HTML>
<html>
<body>
<form action="" method="get">
name:
<input type="text" list="names_list"
name="stdnt_name" /><br />
<datalist id="names_list">
<option label="A" value="nameA" />
<option label="B" value="nameB" />
<option label="C" value="nameC" />
</datalist>
</form>
</body>
</html>
HTML5
<keygen><output>
 <keygen>       
Authentication

<keygen name="security" />
 <output>   Outputs   


Java Script
<output id="result" onforminput="resCalc()"></output>


Canvas
HTML 5<Canvas>
Java Script
PluginsFlash


heightwidth
<canvas id="myCanvas" width="200" height="100"></canvas>
Java Script
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

id
var c=document.getElementById("myCanvas");
Object2D
var cxt=c.getContext("2d");
Methodscxt
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
Java Script



#FF0000




<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100">

</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
</body>
</html>
Methods
HTML




fillStyle

cxt.fillStyle="#FF0000";
fillRect

cxt.fillRect(0,0,150,75);
moveTo
 

cxt.moveTo(10,10);
createLinearGradient

cxt.
createLinearGradient(0,0,170,50)
addColorStop
  

cxt .addColorStop(0,"#FF0000");
drawImage

cxt.drawImage(img,0,0);
lineTo

cxt.lineTo(150,50);
<canvas>

HTML 5Client
localStorage

localStorage.varName="value";
varNamevalue

localStorage.varName;
sessionStorage


sessionStorage.varName="value";
varNamevalue

sessionStorage.varName;
Java Script
HTML 5


HTML 5


<article>

<aside>

<audio>

<canvas>

<command>

<datalist>

<details>

<embed>
plugin
<figcaption>
<figure>
<figure>

<footer>

<header>

<hgroup>

<keygen>

<mark>


<meter>


<nav>

<output>

<progress>


<rp>
Ruby
Ruby
<rt>
Ruby
<ruby>
Ruby
<section>

<source>

<summary>
detail
<time>

<video>

<wbr>

HTML 5


CSS 3





HTML5





CSS
CSS3

CSS3CSS
CSS
CSSCascading Style Sheet



HTML
CSS



CSS
HTML
HTML







<font>


Font








CSS

CSSHTML




CSS
CSS
CSS
CSS
Inline CSS
CSSstyle


<p style="color:red;"></p>
--CSS
CSS
Embeded CSS

font
font

  CSS   Head    <style>
</style>
<html>
<head>
<style type="text/css">
CSS 
</style>
</head>
<body>

</body>
</html>


CSS
External CSS
CSS.css


<link>
hrefstylesheet
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>

<body></body>
</html>
CSS
CSS
CSSRules
CSS
selector {
property:value;
property:value;
property:value;
}
{}

selector

CSS

CSS



HTMLh1ap


id#link1#header1#searchForm



CSS
property:value;

propertyvalue


HTMLCSS


CSS
text-align
h1 {text-align:center;}
h1<h1>right
text-alignleftcenter
justifywidth


text-decoration
p a {text-decoration:overline;}
p a<a>
<p>overline
noneunderline
line-through
direction

Decor


p {direction:rtl;}
rtl
right to
left           ltr 
direction
text-transformation
p {text-transformation:uppercase;}
<p>


uppercaselowercasecapitalize



text-indent
p {text-indent:20px;}




color
p {color:red;}
p<p>
colorredgreenwhite
Hexadecimal#FF0000


Aa


#00FC00 #FFFFFF      rgb
rgb(255,0,0)rgb(0,255,0)rgb(255,255,255)

//

00
FF
#FF00FF
#8B008B
rgb
0255

<html>
<head>
<title>

</title>
<style type="text/css">
p {
text-align:justify;
color:#ff0000;
text-decoration:underline;
direction:rtl;
}

</style>
</head>
<body>
<p>




</p>
</body>
</html>



Fonts
CSSFonts
CSSfont-family


commafont-family


CSSSerifSans-serif
Monospace

CSSfont-style
italicnormal
font-sizeemem

<html>
<head>
<title>

</title>
<style type="text/css">



p {
font-family:"Tahoma","Simplified Arabic",sans-serif;
font-size:1.5em;
font-style:italic;
direction:rtl;
}
</style>
</head>
<body>
<p>


</p>
</body>
</html>

 

sans-serif
sans-serif

 

a:linka



a:visited

a:hove

a:active

<html>
<head>
<title>

</title>
<style type="text/css">
a:link{text-decoration:none;color:blue;}
a:visited{color:green;}
a:hover{text-decoration:underline;}
a:active{font-size:120%;}
</style>

</head>
<body>
<a href="#">normal link</a> <br/>
<a href="www.google.com">visited link</a> <br/>
<a href="#">hover link</a> <br/>
<a href="#">normal link 2</a> <br/>
</body>
</html>


a:hovera:linka:visiteda:activea:hover
Backgrounds
CSS
background-color



background-color:#CF1A11;
background-
image
background-image:url(‘image.jpg’);


background-repeatrepeat-x
repeat-yrepeat

no-repeat
background-position
left topleft centerleft bottomcenter topcenter center
center bottomright topright centerright bottom
<p>
<html>
<head>
<title>

</title>
<style type="text/css">
.firstP {
background-color:black;
color:white;
}
.secondP {

background-image:url(‘image1.jpg’);
background-repeat:no-repeat;
background-position:center center;
}
p {direction:rtl;}
</style>
</head>
<body>
<p class="firstP">

</p>
<p class="secondP">
 <br/><br/>
 <br/>
<br/>

</p>
</body>
</html>
classes

classCSS
class





CSS

list-style-type
circlesquarediscnone
upper-romanlower-romanlower-
alphaupper-alphalower-latinupper-latindecimal

list-style-image

list-style-image:url('image.gif');


<html>
<head>
<title>

</title>
<style type="text/css">
ul {list-style-type:square;}
ol {list-style-image:url('dot.gif');}
</style>
</head>
<body>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</body>
</html>




HTMLCSS
CSS



<html>
<head>
<style type="text/css">
table
{
font-family:"Trebuchet MS", sans-serif;
width:100%;
border-collapse:collapse;

direction:rtl;
text-align:center;
}
td, th
{
font-size:1em;
border:1px solid #98bf21;
}
th
{
font-size:1.1em;
background-color:#A7C942;
color:#ffffff;
}
.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>

<th></th>
<th></th>
</tr>
<tr>
<td>  </td>
<td></td>
<td></td>
</tr>
<tr class="alt">
<td>  </td>
<td></td>
<td></td>
</tr>
<tr>

</table>
</body>
</html>


CSS
CSS
border
soliddashed
 dotted


border-collapse
collapse



.alt
Zebra-stripping

Positioning

CSS




CSS
Static

 Fixed    
   
topleftrightbottom  fixed 
position

Relative

topleftrightbottomrelative
position


Absolute

topleftrightbottomabsolute
position


<html>


<html>
<head>

<style type="text/css">
* {direction:rtl;}
h1
{ position:absolute; left:100px; top:150px; }
</style>
</head>
<body>
<h1></h1>
<p>


</p>
</body>
</html>


CSS
*

 z-index  
z-index

<html>
<head>
<style type="text/css">
* {direction:rtl;}
img
{
position:absolute;
left:100px;
top:50px;
z-index:-1;
}
</style>
</head>
<body>
<h1></h1>
<img src="image1.jpg" width="100" height="140" />
<p>
 z-index

 
</p>

</body>
</html>

z-index


scrolloverflow
<html>
<head>
<style type="text/css">
* {direction:rtl;}
div
{
background-color:#00FFFF;
width:250px;

height:100px;
overflow:scroll;
}
</style>
</head>
<body>
<div>
<p>

</p>
</div>
</body>
</html>



CSS
widthheight




px

150px
%

50%
em
em
1.5em
in

1in
cm

1cm
mm

100mm
pt



30pt
pc


15pc
CSS
CSS Box Model

box model
HTML

content
padding
border
 margin      




box model
CSS


border
CSS        border-width
border-styleborder-color
border-width
border-styledotteddashed
soliddoublegrooveridge
insetoutset

<html>
<head>

<style type="text/css">
* { direction:rtl; }
.one
{ border-style:solid; }
.two
{ border-style:dashed; }
</style>
</head>
<body>
<p class="one">  </p>
<p class="two">  </p>
</body>
</html>


border-style
border-style

border-style: dotted dashed groove double;
border-left-styleborder-right-styleborder-top-style
border-bottom-styleborder-color
border-width
padding

padding-leftpadding-rightpadding-
toppadding-bottom
padding



<html>
<head>
<style type="text/css">
p
{ direction:rtl; background-color:black; color:white; }
.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;

padding-left:50px;
}
</style>
</head>
<body>
<p>
</p>
<p class="padding"> 
 </p>
</body>
</html>


margin

margin-leftmargin-right

margin-topmargin-bottom
margin


auto

<html>
<head>
<style type="text/css">
p
{ direction:rtl; background-color:black; color:white; }
.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p></p>
<p class="margin"></p>
</body>
</html>


margin

HTMLCSS
nonedisplay
hiddenvisibility





HTML

block


<h1><p><div>
inline

<a><span>
CSSblockinline
blockinlinedisplay
opacity
CSSopacity
0.01.0


floating
floatCSS

CSSrightleft


<html>
<head>
<style type="text/css">
p { direction:rtl; text-align:justify; }

img { float:right; }
</style>
</head>
<body>
<p>
<img src="picture1.gif" />





</p>
</body>
</html>


float









float






CSS         clear
left

rightboth

CSS

CSS/**/
/* comment */
Media types
CSS









mediaCSS
mediaCSS
@media
<html>
<head>
<style type="text/css">
@media screen
{
p{
text-align:justfy
direction:rtl;

color:white;
}
body {
background-color:green;
}
}
@media print
{
p
{
text-align:justfy;
direction:rtl;
color:white;}
}
</style>
</head>
<body>
<p>



</p>
</body>
</html>


@media

@media

@media


all

aural

braille

embossed

handheld

print

projection

screen

tty

tv

@media
    Media     CSS
CSS

CSS3


CSS




CSS



.class
.Mukhtar
   
class="Mukhtar
#id
#name
   
id="name

*
*

tag
p
<p>
tag,tag
a,p
  <a>
<p>
tag tag
div a
  <a>
<div>
tag>tag
div>a
  <a>
<div>
tag+tag
div+p
  <p>

<div>
[attribute]
[src]
src
[attribute=v]
[src=image.jpg]
src

image.jpg
[attribute~=v]
[target~=_blank]
    
target   

_blank
[attribute|=v]
[href|=http://]
    
target   

http://
:link
a:link

:visited
a:visited

:active
a:active

:hover
a:hover

:focus
input:focus

:first-letter
p:first-letter
<p>
:first-line
p:first-line
<p>

:first-child
p:first-child
 <p>
  

:before
p:before
<p>
:after
p:after
<p>
:lang(language)
p:lang(en)
  <p> 
langen
CSS

CSS 3

Web 2.0



CSS3
CSS3CSS

Module











CSS3
HTML5

CSS3 Borders
CSS3Round Corner Borders
Photoshop
border-radius


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
</style>
</head>
<body>

<div>The border-radius property allows you to add rounded
corners to elements.</div>
</body>
</html>

border-radius
Firefox-moz-border-radius
CSS3


repeated
stretch



CSS3

border-image-sourcerepeat
stretch  border-image-repeat     
border-image-width       border-
image-sliceborder-image-outset

border-image
border-image:source slice width outside repeat;



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
border-width:15px;
width:250px;
padding:10px 20px;
-webkit-border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<div> Here, the image is stretched to fill the area.</div>

</body>
</html>


 Firefox  -moz-      
SafariChrome-webkit-Opera-o-
CSS3
box-shadow

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:yellow;

-webkit-box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>


SafariChrome-webkit-
CSS3 Backgrounds
CSS3
background-size



CSS3

background-size: 80px 60px;

Firefox-moz-
    background-origin    
context-box
     padding-box   

border-box

CSS3
SafariChrome-webkit-
CSS3

background-image:url(back1.gif),url(back2.png);

CSS3
CSS3




hanging-punctuation
none first
last allow-
end force-
end
    
<p>
punctuation-trim
start end
allow-end
adjacent
none

<p>
text-justify
auto inter-
word inter-
ideograph
inter-cluster
distribute
kashidatrim

 text-align 
Justify
text-outline
  

  

    

text-overflow
clipellipsis
string



text-shadow
  



text-wrap
nonenormal
unrestricted
suppress

word-break
normal
break-all
hyphenate

word-wrap
normal
word-break



word-break
CSS3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>

<h1></h1>
</body>
</html>
CSS3
CSS


CSS3
src
@font-face

@font-face


font-family
Internet Exploer.eot
.ttf.otf

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@font-face
{
font-family: myFont;

src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot') format("opentype"); /* IE */
}
div
{
font-family:myFont;
}
</style>
</head>
<body>
<div>

</div>
</body>
</html>
2D Transformation
CSS3         
translaterotatescale
transform
Internet Explorer-ms- Firefox
-moz-Opera-o-ChromeSafari
-webkit-




translate(x,y)

translateX(n)
Xn
translate(n)
Yn
scale(x,y)

scaleX(n)
Xn
scaleY(n)
Yn
rotate(α)
α
skew(Xα,Yα)
XαYα
skewX(α)
Xα
skewY(α)
Yα
CSS3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
-webkit-transform:skew(30deg,20deg);
width:100px;
height:75px;
background-color:red;
border:1px solid black;

}
</style>
</head>
<body>
<div>It is CSS3 Magic!</div>
</body>
</html>

Skew
degdegree

rad

3D transformation
CSS3



nX
nY
nZ

Xn
Yn
Zn

α
Xα
Yα
Zα

CSS3
Transition
CSS3
transitionCSS



transition: property duration;
propertyduration

transition: property1 duration1, property2 duration2,… etc;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
-webkit-transition:width 2s, height 2s;
}
div:hover
{
width:200px;
height:200px;
webkit-transform:rotate(180deg);
}

</style>
</head>
<body>
<div>Hover over me to see the transition effect!</div>
</body>
</html>

ssecond
CSS3
CSS3
 .gif   flash      

@keyframe
fromto

animation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
-webkit-animation:myAnimation 5s;
}
@-webkit-keyframes myAnimation
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>




CSS
@keyframes
@-webkit-keyframes myAnimation
{
0% {background:red;}
15% {backgroung:green;width:150px;color:white;}
50% {height:350px;}
100% {background:yellow;}
}
0%100%


CSS3
CSS3Multi-Columns


column-count



column-widthcolumn-gap

             




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.newspaper
{
-webkit-column-count:3;
}
</style>
</head>
<body>
<div class="newspaper">
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content this is a
sample content this is a sample content this is a sample content
this is a sample content this is a sample content.

</div>
</body>
</html>


column-rule

column-rule: 4px dotted black;
CSS3 User Interface
  CSS3         





appearance
normal icon
window button
menufield
   

icon
autoinherit


nav-down
nav-left
nav-right
nav-up
auto inherit
   

     
     

nav-index

     
Tab

Tab
resize
nonehorizontal
verticalboth
     
div
CSS3
CSS3
CSS3



tag1~tag2
p~ul


tag[attribute^=v]
a[href^="https"]
     
hrefhttps

tag[attribute$=v]
a[href$=".xml"]
     
.xml
tag[attribute*=v]
a[href*="micro"]
     
micro
:first-of-type
p:first-of-type
<p>


:last-of-type
p:last-of-type
<p>


:only-of-type
p:only-of-type
<p>


:only-child
p:only-child
  <p> 

:nth-child(n)
p:nth-child(2)
  <p> 

:nth-last-child(n)
p:nth-last-child(2)
  <p> 


:nth-of-type(n)
p:nth-of-type(2)
  <p> 

:last-child
p:last-child
  <p> 

:root
:root

:empty
p:empty
  <p>


:target
#news:target
 #news




:enabled
input:enabled

:disabled
input:disabled


:checked
input:checked

:not(selector)
:not(p)
<p>
::selection
::selection
    

CSS3


CSS3
HTML5 CSS3


Java ScriptjQuery
PHPASP.NET

Web Developer


HTML5CSS3





      
 
  
mokhtar_ss@hotmail.com






HTML ....................... 

HTML ............. 
<p>align ................ 
 :  ................................................. 
 : <hr /> .................................................. 
 . 
 ......................................... 
 .............................. 
 :  ................................................... 
 :  .................................................. 
 : 
 ........................... 
 ................................................ 
 ........................... 
 :  .................................................. 
 .................................................. 
 :  ......................................................... 
 ................................... 
 .......................... 
 : ................................................... 
 : HTML ..................................... 
HTML .............................................. 

rowspancolspan . 
 .................................................. 
 ........................................................ 
checkboxradio ...................................... 
select ............................................. 
textarea ......................................... 
fieldSet .................................................. 
 ............................................... 
 .................................................. 
 : .............. 
 :  ............ 
 ........................... 
 .......................................... 
  .................................................. 

 .................................................................................... 
 ................................... 
 ......... 
CSS ........................................ 

CSS .................... 
z-index ...................................... 
 ............... 
box model ............................................... 

 ................................ 
margin .......................... 
float ..................................... 
@media .................................................. 
@media .................................................. 
border-radius ....................... 
CSS3 ............................................... 
 ................................... 
 ................................... 
CSS3 ......................... 
Skew .......................... 
 .................................... 
CSS3 ............................... 



HTML ........................... 
 : HTML ........................................... 
typeinput ......................... 
HTML............................................................. 
<video> .................................................... 
<video> .................................................... 
 : HTML 5 .................................. 
<canvas> ......................................... 
HTML 5 ............................................. 
CSS ................................................... 
@media ...................................................... 
CSS ............................................................. 
CSS3 ............................. 
CSS3 ............................... 
CSS3 ............................... 
CSS3 .............................................. 



 .........................................................................
 ...........................................................................
............................................................... 
 ........................................................................ 
HTML ............................................................... 
HTML...................................... 

HTML .................................................... 
HTML................................................................ 
WHITE SPACES ....................................................... 
HTML ................................................... 
HTML .................................................. 
ATTRIBUTES ................................................... 
HEADINGS .................................................... 
HORIZONTAL LINE .......................................... 
COMMENTS .......................................................... 
PARAGRAPHS ............................................... 

TEXT FORMATTING .................................... 

SPECIAL CHARACTERS ............................... 
HYPER LINKS .................................................. 
IMAGES ....................................................... 

 .............................................. 

IMAGE MAPS ................................................. 

INTERNAL LINKING .............................................. 
LISTS .................................................................. 
TABLES............................................................... 
 ......................................................... 
FORMS ............................................................... 
 ......................................... 
FRAMES ............................................................. 
META .............................................................. 
HTML ............................................................. 
XHTML ...................................................................... 
XHTML ................................................................ 
<!DOCTYPE> ............................................. 
 ....................................................... 
XHTML ............................................ 

HTML5 ...................................................................... 
HTML 5 ......................................... 
VIDEO .......................................................... 
AUDIO ........................................................ 
FORMS ....................................................... 

CANVAS ........................................................ 
 ............................................... 
HTML 5 ............................................... 
 ........................................................................ 
CSS ................................................................ 
CSS ................................................ 
CSS ........................................................ 
CSS ............................................................... 
 ................................................. 
FONTS ................................................... 
 .................................................... 
BACKGROUNDS ........................................... 
 ..................................................... 
 ................................................... 

POSITIONING ............................................ 

CSS..................................................... 
CSS BOX MODEL ........................................... 
BORDER ................................................... 
PADDING .......................................... 
MARGIN .......................................... 
 ............................................................. 
 ....................................................... 
OPACITY ............................................................ 

FLOATING ............................................................ 
CSS ............................................................... 
MEDIA TYPES .................................................. 
CSS ......................................................... 
CSS 3 ..................................................................... 
 ....................................................... 
CSS3 BORDERS .............................................. 
CSS3 BACKGROUNDS ....................................... 
CSS3 ................................ 
CSS3 ........................................ 
2D TRANSFORMATION ........................ 
3D TRANSFORMATION ....................... 

TRANSITION ................................................ 
CSS3 .............................................................. 
CSS3 .................................................. 
CSS3 USER INTERFACE ...................................... 
CSS3 ............................................................. 
 ..................................................................... 
 ............................................................. 
 .............................................................. 
 ........................................................... 











.

.


.






.







.



.







.





.


.






.












.
HTML5 & CSS3 






 jQuery 

.
3D Game Studio 



F1

.







.








.



Desktop: C#, VB.NET, VB6, Java.
Web:
o Server-Side: ASP.NET classic and ASP.NET MVC,
PHP Classic & PHP MVC using CodeIginiter
framework., JSP.

o Client-Side: HTML 5, CSS 3, java script & jQuery.
o Technologies: XML, JSON.
Smart phones: Android programming.
-Access.
-Word, MS-PowerPoint, Photoshop, Maintenance
skills




 ASP.NET


 vb4arab.com -


.


.


.




 .


.





.






.





.





.




.


 -

.



.




.






.


 mokhtar_ss@hotmail.com